<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin">Asides</h3>
</div>
<div class="p-md" ng-controller="AsideDemoCtrl">
  <p>Asides are custom panels, drawers that inherit the behavior of modals.</p>

  <pre class="bs-example-scope">$scope.aside = {{aside | json}};</pre>
  <div class="bs-example" append-source>

    <!-- Button to trigger a default aside with a scope as an object {title:'', content:'', etc.} -->
    <button type="button" class="btn btn-lg btn-primary" data-animation="am-slide-right aside-open-backdrop" bs-aside="aside" data-html="true">Click to toggle aside
      <br />
      <small>(using an object)</small>
    </button>

    <!-- You can use a custom html template with the `data-template` attr -->
    <button type="button" class="btn btn-lg btn-danger" data-template="views/ui/angular-strap/aside.tpl.html" data-placement="left" data-animation="am-slide-left aside-open-backdrop" bs-aside="aside" data-container="body">Custom aside
      <br />
      <small>(using data-template)</small>
    </button>

    <button type="button" class="btn btn-lg btn-default" data-template="views/ui/angular-strap/aside.tpl.html" data-placement="top" data-animation="am-slide-top aside-open-backdrop" bs-aside="aside" data-container="body">Aside top
      <br />
      <small>(using data-template)</small>
    </button>

    <button type="button" class="btn btn-lg btn-default" data-template="views/ui/angular-strap/aside.tpl.html" data-placement="bottom" data-animation="am-slide-bottom aside-open-backdrop" bs-aside="aside" data-container="body">Aside bottom
      <br />
      <small>(using data-template)</small>
    </button>

  </div>

  <div class="callout callout-info">
    <h4>Custom styles required</h4>
    <p>Asides are not part of the Bootstrap's core, to use them you must use <code>bootstrap-additions.css</code> from the <a href="//github.com/mgcrea/bootstrap-additions" target="_blank">BootstrapAdditions</a> project. This project being not yet fully released, meanwhile, you can use the <a href="//mgcrea.github.io/angular-strap/static/styles/bootstrap-additions.min.css" target="_blank">development snapshot</a> compiled for theses docs.</p>
  </div>

  <h2 id="asides-usage">Usage</h2>
  <p>Append a <code>bs-aside</code>attribute to any element to enable the plugin.</p>
  <div class="callout callout-info">
    <h4>The module also exposes an <code>$aside</code>service</h4>
    <p>Available for programmatic use.</p>
    <div class="highlight">
      <pre>
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .controller('DemoCtrl', function($scope, $aside) {
            // Show a basic aside from a controller
            var myAside = $aside({title: 'My Title', content: 'My Content', show: true});

            // Pre-fetch an external template populated with a custom scope
            var myOtherAside = $aside({scope: $scope, template: 'aside/docs/aside.tpl.demo.html'});
            // Show when some event occurs (use $promise property to ensure the template has been loaded)
            myOtherAside.$promise.then(function() {
              myOtherAside.show();
            })
          })
        </code>
      </pre>
    </div>
  </div>

  <h3>Options</h3>
  <p>Options can be passed via data-attributes on the directive or as an object hash to configure the service. For data attributes, append the option name to <code>data-</code>, as in <code>data-animation=""</code>.</p>
  <p>For directives, you can naturally inherit the contextual <code>$scope</code> or leverage a custom one with an <a href="http://docs.angularjs.org/guide/expression">AngularJS expression</a> to evaluate as an object directly on the <code>bs-aside</code> attribute</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th style="width: 100px;">Name</th>
          <th style="width: 50px;">type</th>
          <th style="width: 50px;">default</th>
          <th>description</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>animation</td>
          <td>string</td>
          <td>am-fade-and-slide-right</td>
          <td>apply a CSS animation powered by ngAnimate</td>
        </tr>
        <tr>
          <td>placement</td>
          <td>string</td>
          <td>'top'</td>
          <td>how to position the modal - top | bottom | center <small>(requires custom CSS)</small>.</td>
        </tr>
        <tr>
          <td>title</td>
          <td>string</td>
          <td>''</td>
          <td>default title value if <code>title</code>attribute isn't present</td>
        </tr>
        <tr>
          <td>content</td>
          <td>string</td>
          <td>''</td>
          <td>default content value if <code>data-content</code>attribute isn't present</td>
        </tr>
        <tr>
          <td>html</td>
          <td>boolean</td>
          <td>false</td>
          <td>replace <code>ng-bind</code> with <code>ng-bind-html</code>, requires <code>ngSanitize</code> to be loaded</td>
        </tr>
        <tr>
          <td>backdrop</td>
          <td>boolean or the string <code>'static'</code>
          </td>
          <td>true</td>
          <td>Includes a modal-backdrop element. Alternatively, specify <code>static</code>for a backdrop which doesn't close the modal on click.</td>
        </tr>
        <tr>
          <td>keyboard</td>
          <td>boolean</td>
          <td>true</td>
          <td>Closes the modal when escape key is pressed</td>
        </tr>
        <tr>
          <td>show</td>
          <td>boolean</td>
          <td>true</td>
          <td>Shows the modal when initialized.</td>
        </tr>
        <tr>
          <td>container</td>
          <td>string | false</td>
          <td>false</td>
          <td>
            <p>Appends the popover to a specific element. Example:
 <code>container: 'body'</code>. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element -&nbsp;which will prevent the popover from floating away from the triggering element during a window resize.</p>
          </td>
        </tr>
<tr>
          <td>template</td>
          <td>path</td>
          <td>false</td>
          <td>
            <p>If provided, overrides the default template, can be either a remote URL or a cached template id.</p>
            <p>It should be a <code>div.aside</code> element following Bootstrap styles conventions (<a href="//github.com/mgcrea/angular-strap/blob/master/src/aside/aside.tpl.html" target="_blank">like this</a>).</p>
          </td>
        </tr>
        <tr>
          <td>contentTemplate</td>
          <td>path</td>
          <td>false</td>
          <td>
            <p>If provided, fetches the partial and includes it as the inner content, can be either a remote URL or a cached template id.</p>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
  <div class="callout callout-info">
    <h4>Default options</h4>
    <p>You can override global defaults for the plugin with <code>$asideProvider.defaults</code></p>
    <div class="highlight">
      <pre class="bs-exemple-code">
        <code class="javascript" highlight-block>
          angular.module('myApp')
          .config(function($asideProvider) {
            angular.extend($asideProvider.defaults, {
              animation: 'am-fadeAndSlideLeft',
              placement: 'left'
            });
          })
        </code>
      </pre>
    </div>
  </div>


  <h3>Scope methods</h3>
  <p>Methods available inside the directive scope to toggle visibility.</p>

  <h4>$show()</h4>
  <p>Reveals the aside.</p>

  <h4>$hide()</h4>
  <p>Hides the aside.</p>

  <h4>$toggle()</h4>
  <p>Toggles the aside.</p>

</div>
